<template>
  <div>
    <a-modal title="匹配产品SKU" :footer="false" :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div class="order-info">
        <div class="left">
          <a-image :src="info.productPic" width="60px" height="60px"></a-image>
        </div>
        <div class="right">
          <TextLimit position="top" style="width: 120px; height: 20px" :rows="1">{{ info.productName ? info.productName : '--' }}</TextLimit>
          <div>
            <a-typography-paragraph copyable>
              <span class="highlight">{{ info.asin }}</span>
            </a-typography-paragraph>
          </div>
          <div>
            <a-typography-paragraph copyable>
              <span class="highlight">{{ info.msku }}</span>
            </a-typography-paragraph>
          </div>
        </div>
      </div>
      <div class="product-con">
        <FilterTable :filterItem="filterItem" :is-show-tag="false" :isReset="false" @search="searchByVal" />

        <a-table v-if="visible" :loading="loading" size="mini" class="table-singe-line" :pagination="false" :data="skuList" :scroll="{ y: '300px' }">
          <template #columns>
            <a-table-column title="图片" :width="60" #cell="{ record }">
              <ImgPopover :src="getMainUrl(record)">
                <template #con>
                  <a-image width="60" height="60" fit="contain" :src="getMainUrl(record)" />
                </template>
              </ImgPopover>
            </a-table-column>
            <a-table-column title="sku" :width="60" #cell="{ record }">
              <TextLimit position="top" :rows="2">{{ record.sku }}</TextLimit>
            </a-table-column>
            <a-table-column title="产品名称" :width="60" #cell="{ record }">
              <TextLimit position="top" :rows="2">{{ record.skuName }}</TextLimit>
            </a-table-column>
            <a-table-column title="类目" :width="60" #cell="{ record }">
              {{ $extract(record, 'category.name') }}
            </a-table-column>
            <a-table-column title="销售员" :width="80" #cell="{ record }">
              <a-select v-model="record.salemanId">
                <a-option v-for="item of record.salerList" :label="item.name" :value="item.id"></a-option>
              </a-select>
            </a-table-column>
            <a-table-column title="操作" :width="40" #cell="{ record }">
              <a-button type="text" @click="match(record)">匹配</a-button>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getOrganizesUser } from '@/api/system'
  import { getProductSKUList } from '@/api/product'
  import { updateItemSku } from '@/api/order'
  import TextLimit from '@/components/textLimit.vue'
  import FilterTable from '@/components/TableFilter.vue'
  export default defineComponent({
    props: ['info'],
    components: { TextLimit, FilterTable },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        filterItem: [
          {
            type: 'input_keyword',
            key: 'skuList',
            keyItems: [
              { label: '产品SKU', value: 'skuList' },
              { label: '产品名称', value: 'skuNameList' },
            ],
            keyWidth: '120',
            value: ref(),
            placeholder: '请输入',
            label: 'skuList',
            width: 180,
            isMultiple: true,
          },
        ],
        userList: [],
        skuList: [],
        loading: false,
      })

      const open = () => {
        getProductList()
      }
      const handleOk = () => {}
      const handleCancel = () => {
        emit('save')
        data.loading = false
        visible.value = false
      }
      const searchByVal = (val: any) => {
        let params = {}
        for (const key in val) {
          if (val[key]) {
            params[key] = val[key].split(',')
          }
        }

        getProductList(params)
      }
      const getProductList = async (info?: any) => {
        let params = {
          ...info,
          pageNum: 1,
          pageSize: 20,
        }
        data.loading = true
        const res: any = await getProductSKUList(params)
        data.skuList = res?.data?.records
        data.skuList.map((e: any) => {
          e.salemanId = e.salerList && e.salerList[0] ? e.salerList[0].id : ''
          return e
        })
        data.loading = false
      }

      const getMainUrl = (item: any) => {
        if (item.productPicList && item.productPicList[0]) {
          return item.productPicList[0].url
        } else {
          return ''
        }
      }

      const match = async (info: any) => {
        let obj = {
          orderItemId: props.info.orderItemId,
          productCategoryId: info?.category?.id || '',
          productCategoryName: info.category.name,
          productId: info?.id || '',
          productName: info.skuName,
          productPic: info.productPicList[0]?.url,
          productSku: info.sku,
          salerDeptId: info?.developer?.id || '',
          salerDeptName: info?.developer?.name || '',
          salerId: info.salemanId,
          salerName: info.salerList.find((e: any) => e.id == info.salemanId)?.name || '',
        }
        const res = await updateItemSku(obj)
        if (res) {
          Message.success('匹配成功')
          handleCancel()
        }
        // console.log(obj)
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        searchByVal,
        getMainUrl,
        match,
      }
    },
  })
</script>

<style lang="less" scoped>
  .order-info {
    height: 60px;
    display: flex;
    .right {
      margin-left: 10px;
      flex: 1;
      :deep(.arco-typography) {
        margin-bottom: 0;
      }
    }
  }

  .product-con {
    margin-top: 10px;
  }
</style>
